<template>
  <div class="page-search">
    <QueryForm v-bind="searchFormConfig" v-model="formData">
      <template #header>
        <h2>高级检索</h2>
      </template>
      <template #footer>
        <div class="handle-btns">
          <el-button type="primary" @click="handleQueryClick">搜索</el-button>
          <el-button @click="handleResetClick">重置</el-button>
        </div>
      </template>
    </QueryForm>
  </div>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits } from 'vue'
import QueryForm from '@/base-ui/form'

const props = defineProps({
  searchFormConfig: {
    type: Object,
    required: true
  }
})

const emit = defineEmits(['resetClick', 'queryClick'])

// 通过传过来的配置初始化空对象的各个字段
const formItems = props.searchFormConfig?.formItems ?? []
const formOriginData: any = {}
for (const item of formItems) {
  formOriginData[item.field] = ''
}

// 创建 v-model 对象
const formData = ref(formOriginData)

// 重置 v-model 对象
const handleResetClick = () => {
  for (const key in formOriginData) {
    formData.value[key] = formOriginData[key]
  }
  emit('resetClick')
}

const handleQueryClick = () => {
  emit('queryClick', formData)
}
</script>

<style scoped lang="less">
.handle-btns {
  text-align: right;
  padding: 0 50px 20px 0;
}
</style>
